<template>
  <div class="container" v-if="banner.length>0">
    <swiper
      class="swiper"
      :style="{height:height+'rpx'}"
      :indicator-dots="dots"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
      :indicator-active-color="activecolor"
      :indicator-color="color"
      @change="swiperChange"
    >
      <swiper-item class="swiperitem" v-for="(item, index) in banner" :key="index" @tap="toDetail(item)">
        <image v-if="imgUrl&&item.ad_image" :src="imgUrl+item.ad_image" mode="aspectFill" />
      </swiper-item>
    </swiper>
    <!-- dots -->
    <div class="dots">
      <div v-for="(item,index) in banner.length" :index="index" :key="index">
        <div class="dot" :class="{'active':  index == newCurrent}"></div>
      </div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";
export default {
  name: "carousel",
  props: {
    // banner数组
    banner: {
      type: Array,
      default() {
        return [];
      }
    },
    // 轮播高度
    height: {
      type: Number,
      default: 200
    },
    // 是否显示面板指示点
    dots: {
      type: Boolean,
      default: false
    },
    // 是否自动切换
    autoplay: {
      type: Boolean,
      default: true
    },
    // 自动切换时间间隔
    interval: {
      type: Number,
      default: 5000
    },
    // 滑动动画时长
    duration: {
      type: Number,
      default: 150
    },
    // 当前选中的指示点颜色
    activecolor: {
      type: String,
      default: "#FFD58A"
    },
    // 指示点颜色
    color: {
      type: String,
      default: "rgba(0,0,0,0.3)"
    }
  },
  data() {
    return {
      imgUrl: common.image_response, //http图片
      newCurrent: 0, // 当前索引
    };
  },
  onLoad: function(options) {},
  onShow() {},
  methods: {
    //轮播图的切换事件
    swiperChange(e) {
      this.newCurrent = e.target.current;
      // this.$emit('statusFor',e.target.current)
    },
    // banner跳转
    toDetail(item){
      console.log(item);
      
     common.to_detail(item)
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.swiper {
  width: 100%;
  box-sizing: border-box;
}
.swiper image {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.dots {
  height: auto;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
}
/*未选中时的小圆点样式 */
.dot {
  margin-right: 6px;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  float: left;
  transition: all 0.2s ease-in-out;
}
/*选中以后的小圆点样式  */
.active {
  width: 10px;
  height: 4px;
  background: rgba(255, 255, 255, 1);
  border-radius: 2px;
}
</style>